import React, { Component } from 'react'
import { handleResize } from '../util/resizeHelper.js'
import Pagination from './Pagination.jsx'

let resizeHeight = 0

export default class Table extends Component {

	state={
		height: 782,
		pagination:{}
	}

	componentWillReceiveProps(newProps){
		
	}
	
	componentDidMount(){
		handleResize(this, resizeHeight)
		
	}

	handleChange = (page,pageSize)=>{
		this.props.pagination.handlePageChange(page)
	}

	render() {
		const { dataSource, fixedHeader, columns, handleCheckbox, pagination } = this.props

		

		return (
			<div>
				<div style={{ backgroundColor: "#fff" }}>
					{ fixedHeader && (<table className="table table-bordered table-hover no-margin">
						<thead>
							<tr>
								<th style={{ width: 30 }}><input type="checkbox" /></th>
								<th style={{ width: 33 }}>#</th>
								{
									columns.map((item_c,index)=>(
										<th key={item_c.key + index} style={{ width: item_c.width}}>{ item_c.title }</th>
									))
								}
								<th></th>
							</tr>
						</thead>
					</table>) }
				</div>
				<div style={{ overflow: 'auto', height: this.state.height, backgroundColor: "#fff" }}>
					<table  className="table table-bordered table-hover">
						{!fixedHeader && 
							(<thead>
							<tr>
								<th style={{ width: 30 }}><input type="checkbox" /></th>
								<th style={{ width: 33 }}>#</th>
								{
									columns.map((item_c, index) => (
										<th key={"th_" + index} style={{ width: item_c.width }}>{item_c.title}</th>
									))
								}
								<th></th>
							</tr>
						</thead>)
					}
						<tbody>
							{
								dataSource.map((s, index) => (
									<tr key={JSON.stringify(s)}>
										<td style={{ width: 30 }}>
											<input onChange={ handleCheckbox.bind(this,s) } type="checkbox" />
										</td>
										<td key={'tr_td_' + index} style={{ width: 33 }}>{(pagination.current - 1) * pagination.pageSize + index + 1}</td>
										{	
											columns.map((item_c, index) => {
												if(item_c.render){
													return <td key={'td_' + index} style={{ width: item_c.width }}>{item_c.render(s)}</td>
												}else{
												 	return <td key={'td_' + index} style={{ width: item_c.width }}>{s[item_c.dataIndex]}</td>
												}
											})
										}
										<td></td>
									</tr>
								))
							}
						</tbody>
					</table>
				</div>
				<Pagination 
					handleChange={this.handleChange }
					pagination={pagination}
				/>	
			</div>
		)
	}
}
